<template>
    <view class="popular">
      <image style="width: 100%;" src="https://img2.baidu.com/it/u=820750186,2276930444&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"  mode="widthFix"></image>
      <view class="popular-items">
          <!-- <PopularCar :item="item" :index="index" v-for="(item,index) in dataList" :key="item.id"/> -->
          

          <fui-timeaxis background="#fff" :padding="['32rpx','0rpx']">
            <fui-timeaxis-node lineColor="#000" :lined="index!==dataList.length-1"
              v-for="(item,index) in dataList" :key="index">
              <view class="fui-node">
              </view>
              <template v-slot:right>
                <view class="fui-process__node" :class="{'fui-node__pb':index!==dataList.length-1}">
                  <view class="fui-title">{{item.dateCreated}}
                  </view>
                      <PopularCar :showStatus="false" :item="items" :index="indexs" v-for="(items,indexs) in item.data" :key="item.id"></PopularCar>
                </view>
              </template>
            </fui-timeaxis-node>
          </fui-timeaxis>



      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import dyUserPlayingService from "@/api/dyUserPlayingService";
  import PopularCar from "@/components/PopularCar/PopularCar.vue";
  const size = ref(10)
  const page = ref(1)
  const dataList = ref()
  const getNewOnline = async()=>{
       const {result,success} = await dyUserPlayingService.getNewOnline({
            size:size.value,
            page:page.value
        })
      if(success){
        dataList.value = result
      }
  }
  
  onLoad(()=>{
    getNewOnline()
  })
  
  </script>
  
  <style lang="scss" scoped>
  .popular{
      .popular-items{
          padding: 28rpx;
          height: 100rpx;
          background: white;
          border-radius: 34rpx 34rpx 0 0 ;
          position: relative;
          z-index: 100;
          top: -80rpx;
        

          .fui-node {
              width: 28rpx;
              height: 28rpx;
              border-radius: 50%;
              background: #f1b8ff;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 4px solid #742dd1;
              box-sizing: border-box;
            }

.fui-process__node {
	padding-left: 20rpx;
}

.fui-node__pb {
	padding-bottom: 48rpx;
}

.fui-title {
	font-size: 34rpx;
	line-height: 34rpx;
	font-weight: bold;
}

.fui-descr {
	font-size: 28rpx;
	padding-top: 12rpx;
	color: #7F7F7F;
}

.fui-time {
	font-size: 24rpx;
	color: #B2B2B2;
	padding-top: 12rpx;
}



      }
  
  }
  
  
  </style>
  